<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>to check rectangle collide</title>
    <style>

    </style>
</head>
<body>
    <script>
        let rectangle1 = {
            top: 0,
            left: 0,
            width: 200,
            height: 150
        }
        let rectangle2 = {
            top: 100,
            left: 100,
            width: 300,
            height: 100
        }
        if(
            rectangle1.left < rectangle2 + rectangle2.width &&
            rectangle1.left + rectangle1.width > rectangle2.left &&
            rectangle1.top < rectangle2.top + rectangle2.height &&
            rectangle1.top + rectangle1.height > rectangle2.top 
        ){
            // collision detected
            console.log('collision detected');
        } else {
            // no collision
            console.log('no collision');
        }
    </script>
</body>
</html>